<template>
  <div class="bars-container">
    <div class="bars-line">
      <ul class="barList">
        <li class="barListItem bar-title" @click="$router.push('/')">QueOJ</li>
        <li class="barListItem" @click="$goRoute('/')">首页</li>
        <li class="barListItem" @click="$goRoute('/problems')">题库</li>
        <li class="barListItem" @click="$goRoute('/ask')">问答</li>
        <li class="barListItem" v-if="userInfo && userInfo.role>1" @click="$goRoute('/manage')">管理</li>
      </ul>
      <div class="barList">
        <div v-if="!login" class="barListItem" @click="$goRoute('/login')">
          登录
        </div>
        <div v-else style="display:flex;">
          <div class="m-msg" @mouseenter="messageVisible = true" @mouseleave="messageVisible = false">
            ✉
            <div class="m-msg-center"  v-show="messageVisible">
              <MessageCenter v-on:openModal = "showMsgModal"/>
            </div>

          </div>
          <el-dropdown>
            <div class="m-name">
              <div style="margin-right: 10px">{{userInfo.nickname}}</div>
              <el-avatar :size="30" :src="userInfo.favicon??'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="$goRoute('/space')">
                  <router-link to="/space">
                    个人中心
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item @click="$goRoute('/analyze')">
                  <router-link to="/analyze">
                    做题分析
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item @click="$goRoute('/pe')">
                  <router-link to="/analyze">
                    权限管理
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item @click="modalVisible = true">
                  修改密码
                </el-dropdown-item>
                <el-popconfirm
                    title="确定要退出吗?"
                    confirm-button-text="好的"
                    cancel-button-text="算了"
                    @confirm="logout"
                >
                  <template #reference>
                    <el-dropdown-item >
                      退出登录
                    </el-dropdown-item>
                  </template>
                </el-popconfirm>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="modalVisible" title="修改密码" width="500px">
    <ChangePassword />
  </el-dialog>
  <el-dialog v-model="msgModailVisiable" title="消息详情" width="500px">
    <MessageDetail v-bind:id="nowMsgId" />
  </el-dialog>
</template>

<script>
import {removeLogin} from "../utils/httpx"

export default {
  name: "TitleBar",
  data:function (){
    return {
      modalVisible :false,
      messageVisible: false,
      nowMsgId : 0,
      msgModailVisiable :false
    }
  },
  computed:{
    login(){
      return this.$store.state.isLogin
    },
    userInfo(){
      return this.$store.state.userInfo
    }
  },
  methods:{
    logout(){
      removeLogin()
      this.$goRoute("/")
    },
    showMsgModal(id){
      this.nowMsgId = id;
      this.msgModailVisiable = true
    }
  }

}

</script>
<style scoped>
.m-msg {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-right: 50px;
  font-size: 20px;
  height: 100%;
  width: 40px;
}
.m-msg-center{
  position: absolute;
  top:25px;
  left: -300px;
  z-index: 9;
}
.m-name{
  display: flex;
  align-items: center;
}
a {
  color: gray;
  text-decoration: unset;
}
.icon-and-name>img{
  margin-left: 10px;
}
.icon-and-name{
  margin-bottom: 10px;
  color: black;
}
.bars-container{
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
.bars-line{
  width: 100%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  font-size: 16px;
}
.barList{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 30px;
  padding: 0;
}
.barListItem{
  height: 20px;
  line-height: 20px;
  margin-right: 30px;
  cursor: pointer;
  list-style: none;
  color: rgba(0,0,0,0.65);
}
.barListItem>img{
  height: 100%;
}
.bar-title{
  font-size: 24px;
  font-weight: bolder;
  letter-spacing: 2px;
}
.head-link{
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
</style>
